
(() => {
    const exportBtn = document.createElement("button");
    exportBtn.innerText = "导出"
    const container = document.createElement("div")
    container.appendChild(exportBtn)
    const checkBtn = document.createElement("button")
    const checkContext = document.createElement("textarea")
    container.appendChild(checkBtn)
    container.appendChild(checkContext)
    checkBtn.innerText = "名单列表"
    checkContext.style.display = "none";
    checkContext.style.position = "absolute"
    container.style.position = "fixed"
    container.style.right = "100px"
    container.style.top = "60px"
    document.body.appendChild(container);
    checkContext.value = window.localStorage.getItem("nameList")

    let display = false;
    checkBtn.onclick = () => {
        display = !display;
        checkContext.style.display = display ? "block" : "none";
    }

    const createCanvas = (data, nameObj, time) => {
        const canvas = document.createElement("canvas")
        canvas.width = 1350;
        const total = data.length;
        canvas.height = total * 50 + 60;
        const width = canvas.width;
        const height = canvas.height
        const car = canvas.getContext("2d");
        car.font = "24px Arial"
        const fillLine = (x, y, x1, y1) => {
            car.beginPath()
            car.moveTo(x, y);
            car.lineTo(x1, y1);
            car.stroke();
            car.closePath()
        }
        const fillCenterText = (text, x, y) => {
            const align = car.textAlign;
            const baseLine = car.textBaseline
            car.textAlign = "center"
            car.textBaseline = "middle"
            car.fillText(text, x, y);
            car.textAlign = align;
            car.textBaseline = baseLine
        }
        const fillTr = (
            line,
            beginX,
            beginY,
            height
        ) => {
            const width = 240
            for (let i = 0; i < line.length; i++) {
                const x = beginX + i * width;
                fillCenterText(line[i], x + width / 2, beginY + height / 2);
                fillLine(x + width, beginY, x + width, beginY + height)
                fillLine(x, beginY + height, x + width, beginY + height)
            }
        }
        fillLine(0, 0, width, 0)
        fillLine(0, 0, 0, height)
        fillLine(0, height, width, height)
        fillLine(width, height, width, 0)

        fillCenterText(time, 75, height / 2)
        const beginX = 150
        fillLine(beginX, 0, beginX, height)

        fillLine(beginX, 60, width, 60)

        fillTr(
            ["姓名", "ID", "审核量", "小时审核量", "违规量"],
            beginX,
            0,
            60
        )
        let i = 0;
        for (const item of data) {
            const { id, line } = item;
            fillTr(
                [nameObj[id], id,
                line.reduce((count, item) => {
                    const total = parseInt(item[2]);
                    return count + isNaN(total) ? 0 : total;
                }, 0),
                line.reduce((count, item) => {
                    const total = parseInt(item[3]);
                    return count + isNaN(total) ? 0 : total;
                }, 0),
                line.reduce((count, item) => {
                    const total = parseInt(item[4]);
                    return count + isNaN(total) ? 0 : total;
                }, 0)
                ],
                beginX,
                i * 50 + 60,
                50
            )
            i++;
        }
        return canvas;
    }
    exportBtn.onclick = () => {
        const iframe = document.getElementsByTagName("iframe")[0];
        const table = iframe.contentDocument.getElementsByTagName("table")[1];
        const tr = Array.from(table.getElementsByTagName("tr"))
        const stack = [];
        const data = tr.map(e => Array.from(e.getElementsByTagName("td")).map(e => e.innerText))
        data.forEach(item => {
            if (item.length === 7) {
                stack.push({
                    id: item[0],
                    line: []
                })
                stack[stack.length - 1].line.push(item.slice(1))
            } else {
                stack[stack.length - 1].line.push(item)
            }
        })
        const nameObj = {};
        const text = checkContext.value;
        window.localStorage.setItem("nameList", text)
        const nameList = text.split("\n").map(e => e.split("\t"));
        for (const [name, id] of nameList) {
            if (!name || !id) continue;
            nameObj[id] = name;
        }
        const [startTime, endTime] = Array.from(iframe.contentDocument.getElementsByClassName("el-range-input")).map(e => e.value.split(" ")[1].split(":"));
        const time = new Date();
        const [h, m, s] = endTime
        time.setHours(Number(h));
        time.setMinutes(Number(m));
        time.setSeconds(Number(s))
        const end = new Date(time.getTime() + 1000);
        const endStr = [end.getHours(), end.getMinutes()].map(e => e <= 9 ? "0" + e : e).join(":");
        const canvas = createCanvas(stack, nameObj, `${startTime[0]}:${startTime[1]}-${endStr}`)
        const d = canvas.toDataURL("jpg");
        window.open(d);
    }
})()